<script setup lang="ts">
import { Popup } from "vant";
import { ref, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import ActivitInfo from "@/components/Activit/activitInfo.vue";
import { HomeAxios } from "@/api";
import { UserStore } from "@/store";
import { useRouter } from "vue-router";
import { RouterEnums } from "@/types";
const router = useRouter();
const { t } = useI18n();
const userStore = UserStore();
const popupShow = ref(false);
const openActfirst = () => {
  popupShow.value = true;
};
onMounted(() => {
  getConfig();
});
const configList: any = ref([]);
//获取配置
const getConfig = () => {
  HomeAxios.getActFirstRechargeConfig().then(res => {
    configList.value = res.list;
  });
};
//跳转页面
const gotoPage = () => {
  if (userStore.isLogin) {
    router.push(RouterEnums.RECHARGE);
  } else {
    router.push(RouterEnums.LOGIN);
  }
};
defineExpose({ openActfirst });
</script>
<template>
  <!-- 首充活动 -->
  <Popup
    v-model:show="popupShow"
    :position="'bottom'"
    z-index="10000"
    duration="0.1"
    style="height: 100%; background-color: rgba(0, 0, 0, 0.5)"
    :overlay="false"
    :safe-area-inset-top="true"
    :safe-area-inset-bottom="true"
  >
    <div class="content-frame">
      <div class="background-frame"></div>
      <div class="div-frame">
        <div class="title-frame df jc-center ai-center">
          <div class="title-name df ai-center">{{ t("navigationBar.firstDeposit") }}</div>
          <img
            class="close-img"
            src="@/image/new_img/home/cs_close.png"
            @click="popupShow = false"
          />
        </div>
        <div class="act-logo-frame">
          <img src="@/image/new_img/activity/first_recharge_top.png" />
          <div class="first-list-frame">
            <div class="first-list-title df ai-center">
              <div class="title-name df jc-center ai-center">
                {{ t("activity.initialRecharge.deposits") }}
              </div>
              <div class="parting-frame"></div>
              <div class="title-name df jc-center ai-center">
                {{ t("activity.initialRecharge.bonus") }}
              </div>
            </div>
            <div class="list-frame df" v-for="(item, index) in configList" :key="index">
              <div class="list-content df jc-center ai-center">
                <div class="moneySymbol">{{ t("currencyType.pt") }}</div>
                <div class="money-val">{{ item.rechargeMoney / 100 }}</div>
              </div>
              <div class="list-content df jc-center ai-center">
                <div class="moneySymbol">{{ t("currencyType.pt") }}</div>
                <div class="money-val val-color">{{ item.giveMoney / 100 }}</div>
              </div>
            </div>
          </div>
          <div class="bottom-img-frame" @click="gotoPage()">
            <img class="bottom-img" src="@/image/new_img/activity/first_recharge_btn.png" />
          </div>
          <ActivitInfo
            :size-val="1"
            :actType="4"
            :title="t('activity.initialRecharge.actDetails')"
          />
        </div>
      </div>
    </div>
  </Popup>
</template>
<style lang="less" scoped>
.content-frame {
  width: 100%;
  height: 100%;
  position: relative;
  left: 0;
  top: 0;
  overflow-y: scroll;
  ::-webkit-scrollbar {
    display: none;
    overflow: -moz-scrollbars-none; /* Firefox */
    -ms-overflow-style: none; /* IE 和 Edge */
  }
  .background-frame {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: rgba(0, 0, 0, 0.5);
    /*半透明背景色 */
    backdrop-filter: blur(20px);
    /*背景模糊效果 */
    -webkit-backdrop-filter: blur(20px);
  }
  .div-frame {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
  }
  .title-frame {
    width: 100%;
    height: 112.5px;
    background: rgba(255, 255, 255, 0.04);
    position: relative;
    left: 0;
    right: 0;
  }

  .title-name {
    font-size: 40px;
    color: #ffffff;
  }

  .close-img {
    width: 44px;
    height: 44px;
    margin-left: 100px;
    position: absolute;
    right: 30px;
    top: 30px;
  }

  .act-logo-frame {
    width: 544.5px;
    height: calc(100% - 130px);
    margin: auto;
    overflow-y: auto;

    img {
      position: relative;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: auto;
    }

    .first-list-frame {
      width: 100%;
      height: auto;
      margin: auto;
      background-image: linear-gradient(72deg, #fe7919 0%, #ab3fe7 100%);
      box-shadow: 0px -2px 8px 0px rgb(43 22 0 / 25%);
      border-radius: 14.432px;
      margin-top: -92px;
      overflow: hidden;

      .first-list-title {
        width: 100%;
        height: 52.3px;
        background: rgba(255, 255, 255, 0.15);
        box-shadow: inset 0px -1px 0px 0px rgb(255 255 255 / 15%);
      }

      .title-name {
        flex: 1;
        font-size: 21px;
        color: #ffffff;
        font-weight: 700;
      }

      .parting-frame {
        width: 1px;
        height: 33px;
        background-color: rgba(255, 255, 255, 0.15);
      }

      .list-frame {
        width: 100%;
        height: 50px;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        background: rgba(0, 0, 0, 0.04);
      }

      .moneySymbol {
        color: rgba(255, 255, 255, 0.45);
        font-size: 21px;
      }

      .money-val {
        color: #fff;
        font-weight: bold;
        font-size: 24.46px;
        margin-left: 7px;
      }

      .val-color {
        color: #ffee00;
      }

      .list-content {
        flex: 1;
      }
    }

    .bottom-img-frame {
      width: 333px;
      height: auto;
      margin: auto;
      margin-top: 32.8px;

      .bottom-img {
        width: 333px;
        height: 100px;
      }
    }
  }
}

.act-logo-frame::-webkit-scrollbar {
  display: none;
}
</style>
